<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3-IE缓存问题</title>
    <style>
        #box {
            width: 200px;
            height: 200px;
            border: 1px solid #666;
        }
    </style>
</head>

<body>
    <button id="btn">点击发送 AJAX 请求</button>
    <div id="box"></div>


    <script>
        /* 
        IE浏览器的问题: 在第一次ajax请求返回后,将响应数据缓存起来了
            后面再发此请求(url/method/参数都不变),不发请求,直接使用缓存的数据
        解决:每次请求都带上一个不一样的参数 =>带上一个时间戳(当前时间值)的参数

        命中缓存 => 用上了缓存
        */

        document.querySelector('#btn').onclick = function () {
            const xhr = new XMLHttpRequest();
            xhr.open('GET', 'http://127.0.0.1:8081/time-server?time=' + Date.now());
            xhr.send();

            // 4. 绑定状态改变的监听
            xhr.onreadystatechange = function () {
                console.log('onreadystatechange readyState', xhr.readyState);
                //如果请求已经完成,才去取数据
                if (xhr.readyState === 4) {
                    //响应状态码
                    console.log(xhr.status);
                    //响应头
                    console.log(xhr.getRepsonseHeader('Content-Type'));
                    //响应体
                    console.log(xhr.responseText);
                    //显示响应体
                    document.getElementById('box').innerHTML = xhr.responseText;
                }
            }
        }
        
    </script>
</body>

</html>